<template>
    <div class="main">
        <Header class="main_header"/>
        <div style="height: 63px;"></div>
        <div class="main_body">
            <div class="main_body_left">
                <div class="main_body_left_user">
                    <div class="main_body_left_one">
                        <img class="main_body_left_avatar" :src="article.user.avatar" alt="头像">
                        <div>
                            <div class="main_body_left_nickname">{{ article.user.nickname }}</div>
                            <div class="main_body_left_one_right">
                                <div class="main_body_left_sex">{{ article.user.sex === '0' ? '男' : '女' }}</div>
                                <div class="main_body_left_time">
                                    码龄{{ getOnlineTime(article.user.createTime.toString()) }}天
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main_body_left_two">
                        <div class="main_body_left_two_item">
                            <div>{{ article.user.integral }}</div>
                            <div>积分</div>
                        </div>
                        <div class="main_body_left_two_item">
                            <div>{{ article.user.fansCount }}</div>
                            <div>粉丝</div>
                        </div>
                        <div class="main_body_left_two_item">
                            <div>{{ article.user.attentionCount }}</div>
                            <div>关注</div>
                        </div>
                        <div class="main_body_left_two_item">
                            <div>{{ article.user.replyCount }}</div>
                            <div>评论</div>
                        </div>
                    </div>
                </div>
                <div class="main_body_left_recommend">
                    <Hot/>
                </div>
            </div>
            <div class="main_body_right">
                <div class="main_body_right_title">
                    <div class="main_body_right_title_text">
                        {{ article.title }}
                        <img class="main_body_right_title_img" @click="playVoice" src="@/assets/img/article/播放.png"
                             alt="播放">
                    </div>

                </div>
                <div class="main_body_right_introduce">
                    <div class="main_body_right_introduce_1">
                        <div class="main_body_right_introduce_gradeTranslation">{{ article.gradeTranslation }}</div>
                        <div class="main_body_right_introduce_nickname">{{ article.user.nickname }}</div>
                        <img class="main_body_right_introduce_createTime_img" src="@/assets/img/article/闹钟.png"
                             alt="闹钟">
                        <div class="main_body_right_introduce_createTime">于{{ article.createTime }}发布</div>
                        <img class="main_body_right_introduce_views_img" src="@/assets/img/article/浏览.png" alt="浏览">
                        <div class="main_body_right_introduce_views">{{ article.views }}</div>
                        <router-link :to="{
                    path: '/writeArticle',
                    query: {
                      articleId:article.id
                    }
                  }">
                            <div v-if="article.userId===userId" class="main_body_right_introduce_edit">
                                编辑
                            </div>
                        </router-link>

                    </div>
                    <div class="main_body_right_introduce_2">
                        文章标签:
                        <div v-for="(item,index) in article.labels" :key="index">
                            <a-button @click="labelSearch(item)" class="main_body_right_introduce_label" type="primary"
                                      size="small"
                                      ghost>{{ item }}
                            </a-button>
                        </div>
                    </div>
                </div>
                <div class="main_body_right_content" v-dompurify-html="article.content"></div>
                <div class="main_body_right_correlation">相关文章</div>
                <div class="main_body_right_for">
                    <div v-for="item in articleList" :key="item.id">
                        <div class="main_body_right_for_item">
                            <div class="main_body_right_for_item_one">
                                <div class="main_body_right_for_item_title">
                                    <router-link target="_blank" :to="{
                    path: '/articleDetails',
                    query: {
                      articleId:item.id
                    }
                  }">
                                        {{ item.title }}
                                    </router-link>
                                </div>
                                <div class="main_body_right_for_item_nickname">{{ item.user.nickname }}</div>
                                <img class="main_body_right_for_item_views_img" src="@/assets/img/article/浏览.png"
                                     alt="浏览">
                                <div class="main_body_right_for_item_views">{{ item.views }}</div>
                            </div>
                            <div class="main_body_right_for_item_content">{{ delHtmlTag(item.content) }}</div>
                            <div style="border-bottom: 1px solid #f0f0f0;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main_body_right_bottom" style="">
                <img @click="handleUserGiveALike" v-if="article.isLike===1" class="main_body_right_bottom_1"
                     src="@/assets/img/article/点赞.png" alt="点赞">
                <img @click="handleUserGiveALike" v-else class="main_body_right_bottom_1"
                     src="@/assets/img/article/未点赞.png" alt="未点赞">
                <div class="main_body_right_bottom_1_count">{{ article.likeCount }}</div>
                <img @click="handleUserCollect" v-if="article.isCollect===1" class="main_body_right_bottom_2"
                     src="@/assets/img/article/收藏.png" alt="收藏">
                <img @click="handleUserCollect" v-else class="main_body_right_bottom_2"
                     src="@/assets/img/article/未收藏.png" alt="未收藏">
                <div class="main_body_right_bottom_2_count">{{ article.collectCount }}</div>
                <img @click="showDrawer" class="main_body_right_bottom_3"
                     src="@/assets/img/article/评论.png" alt="评论">
                <div class="main_body_right_bottom_3_count">{{ article.commentCount }}</div>
            </div>
            <a-drawer
                    v-model:visible="commentVisible"
                    class="custom-class"
                    style="margin-top: 70px;"
                    title="评论区"
                    placement="right"
                    :width="450"
            >
                <CommentEditor/>
                <div class="drawer_body">
                    <div v-for="(item,index) in firstAndSecondList" class="drawer_body_for" :key="item.id">
                        <div class="drawer_body_item">
                            <img class="drawer_body_item_img" :src="item.avatar" alt="头像">
                            <div>
                                <div class="drawer_body_item_nickname">{{ item.nickname }}</div>
                                <div class="drawer_body_item_content" v-dompurify-html="item.content"></div>
                                <div class="drawer_body_item_bottom">
                                    <div class="drawer_body_item_createTime">{{ item.createTime }}</div>
                                    <img @click="userGiveALikeToComments(item.id,index)" v-if="item.isLike===1"
                                         class="drawer_body_item_like" src="@/assets/img/article/点赞.png" alt="点赞">
                                    <img @click="userGiveALikeToComments(item.id,index)" v-else
                                         class="drawer_body_item_like"
                                         src="@/assets/img/article/未点赞.png" alt="未点赞">
                                    <div>{{ item.likeCount }}</div>
                                    <a-button @click="showModalSecondComments(item)" class="drawer_body_item_button"
                                              size="small">回复
                                    </a-button>
                                </div>
                                <div v-for="item2 in item.secondCommentsList">
                                    <div v-if="item2.secondUserId===-1" class="drawer_body_item2">
                                        <img class="drawer_body_item2_avatar" :src="item2.secondTwoAvatar" alt="头像">
                                        <div>
                                            <div class="drawer_body_item2_nickname">{{ item2.secondTwoNickname }}</div>
                                            <div class="drawer_body_item2_content"
                                                 v-dompurify-html="item2.content"></div>
                                            <div class="drawer_body_item2_bottom">
                                                <div class="drawer_body_item2_createTime">{{ item2.createTime }}</div>
                                                <a-button @click="showModalMuchComments(item2)"
                                                          class="drawer_body_item2_button" size="small">
                                                    回复
                                                </a-button>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-else class="drawer_body_item2">
                                        <img class="drawer_body_item2_avatar" :src="item2.secondTwoAvatar" alt="头像">
                                        <div>
                                            <div class="drawer_body_item2_top">
                                                <div class="drawer_body_item2_nickname">{{
                                                    item2.secondTwoNickname
                                                    }}
                                                </div>
                                                <div class="drawer_body_item2_reply">回复</div>
                                                <div class="drawer_body_item2_nickname">{{
                                                    item2.secondOneNickname
                                                    }}
                                                </div>
                                            </div>
                                            <div class="drawer_body_item2_content"
                                                 v-dompurify-html="item2.content"></div>
                                            <div class="drawer_body_item2_bottom">
                                                <div class="drawer_body_item2_createTime">{{ item2.createTime }}</div>
                                                <a-button @click="showModalMuchComments(item2)"
                                                          class="drawer_body_item2_button" size="small">
                                                    回复
                                                </a-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-bottom: 60px"></div>
                </div>
            </a-drawer>

            <!-- 二级评论的对话框 -->
            <a-modal
                    v-model:visible="visibleSecondComments"
                    title="回答"
                    :confirm-loading="confirmLoading"
                    @ok="handleOkSecondComments"
                    @cancel="handleCancelSecondComments"
                    cancelText="取消"
                    okText="确认"
            >
                <SecondCommentEditor @sendContentToArticleComments="receiveChildContent"/>
            </a-modal>

            <!-- 多级评论的对话框 -->
            <a-modal
                    v-model:visible="visibleMuchComments"
                    title="回答"
                    :confirm-loading="confirmLoading"
                    @ok="handleOkMuchComments"
                    @cancel="handleCancelMuchComments"
                    cancelText="取消"
                    okText="确认"
            >
                <SecondCommentEditor @sendContentToArticleComments="receiveChildContent"/>
            </a-modal>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header/index.vue'
import {useRoute, useRouter} from "vue-router";
import {
    articleDetailsRecommend,
    getArticleDetails, getFirstAndSecondComments,
    getUserIsLikeOrCollectArticle, giveALikeToComments,
    publishComments, publishSecondComments, saveUserBrowse,
    saveUserCollect,
    saveUserGiveALike, searchArticle, selectCommentsGiveALive
} from "@/api/home/article";
import {onMounted, ref} from "vue";
import {
    Article, Browse,
    Collect,
    Comments,
    CommentsGiveALike,
    CommentsVo,
    GiveALike,
    SecondCommentsParams
} from "@/model/home/article";
import {getOnlineTime} from "@/utils/timeConversion";
// @ts-ignore
import cookie from 'js-cookie'
import {checkUserLogin} from "@/utils/getUser";
import {message} from "ant-design-vue";
import CommentEditor from '@/components/myRichText/articleEditor/commentEditor.vue'
import SecondCommentEditor from '@/components/myRichText/articleEditor/secondCommentEditor.vue'
// @ts-ignore
import Publish from 'pubsub-js'
import {getText, isNull} from "@/utils/checkoutEditor";
import lodash from "lodash";
import Hot from '@/views/home/article/hot/index.vue'
import {delHtmlTag} from "@/utils/htmlUtils"
import {useStore} from "@/store";
import {RequestParams} from "@/model/home/answer";

const router = useRoute()

const route = useRouter()

//语音功能
const synth = window.speechSynthesis;
const speechMessage = new SpeechSynthesisUtterance();

//语音停止标识符
const is_speak = ref<number>(1)

//语音播放的事件
const playVoice = () => {
    if (is_speak.value) {
        handleSpeak(article.value.title) // 传入需要播放的文字
    } else {
        handleStop(article.value.title)
    }
}
//语音播报的函数
const handleSpeak = (text: string) => {
    speechMessage.text = text;     // 文字内容
    speechMessage.lang = "zh-CN";  // 使用的语言:中文
    speechMessage.volume = 1;      // 声音音量：1
    speechMessage.rate = 0.8;        // 语速：1
    speechMessage.pitch = 1;       // 音高：1
    synth.speak(speechMessage);    // 播放
    is_speak.value = 0
}
//语音停止
const handleStop = (e: any) => {
    speechMessage.text = e;
    speechMessage.lang = "zh-CN";
    synth.cancel();
    is_speak.value = 1
}

//是否显示评论区
const commentVisible = ref<boolean>(false);

//获取路由参数
const articleId: any = router.query.articleId

//用户id
const userId = ref<number>(0)

//文章信息
const article = ref<Article>({
    id: 0,
    userId: 0,
    title: '',
    content: '',
    views: 0,
    commentCount: 0,
    likeCount: 0,
    collectCount: 0,
    type: 0,
    createTime: new Date(),
    updateTime: new Date(),
    user: {
        id: 0,
        mobile: '',
        nickname: '',
        sex: '',
        birthday: '',
        avatar: '',
        email: '',
        integral: 0,
        introduction: '',
        fansCount: 0,
        attentionCount: 0,
        replyCount: 0,
        createTime: new Date()
    },
    labels: [],
    gradeTranslation: '',
    labelTranslation: '',
    isLike: 0,
    isCollect: 0
})

//文章推荐列表
const articleList = ref<Article[]>([])

//获取文章推荐列表
const handleArticleDetailsRecommend = async () => {
    const res = await articleDetailsRecommend(articleId)
    articleList.value = res.data.data.list
}

//显示抽屉
const showDrawer = () => {
    commentVisible.value = true;
};

//全文检索所需的参数
const requestParams = ref<RequestParams>({
    key: '',
    page: 1,
    size: 10,
    sortBy: ''
})

//标签搜索
const labelSearch = (tagName: string) => {
    requestParams.value.key = tagName
    searchArticle(requestParams.value).then((res) => {
        const store = useStore()
        store.setKey(requestParams.value.key)
        const msg = []
        msg.push(res.data.data.pageResult.articles)
        msg.push(requestParams.value.key)
        msg.push(res.data.data.pageResult.total)
        Publish.publish('searchArticleList', msg)
        route.push('/')
    })
}

//获取文章信息
const handleArticleDetails = async () => {
    const res = await getArticleDetails(articleId)
    article.value = res.data.data.article
    const regex = new RegExp('<img', 'gi')
    article.value.content = article.value.content.replace(regex, `<img style="max-width: 100%; height: auto"`)
    await handleUserIsLikeOrCollectArticle()
}

//查询当前用户是否点赞或收藏了文章
const handleUserIsLikeOrCollectArticle = async () => {
    const res = await getUserIsLikeOrCollectArticle(articleId, userId.value)
    article.value.isLike = res.data.data.map.isLike
    article.value.isCollect = res.data.data.map.isCollect
}

//点赞所需的参数
const giveALike = ref<GiveALike>({
    articleId: articleId,
    userId: 0
})

//用户点赞
const handleUserGiveALike = async () => {
    if (!await checkUserLogin() || giveALike.value.userId === 0) {
        message.warn('未登录，无法点赞')
    } else {
        saveUserGiveALike(giveALike.value).then(() => {
            article.value.isLike = article.value.isLike === 1 ? 0 : 1
            //如果点赞，则点赞人数+1
            if (article.value.isLike === 1) {
                message.success("点赞成功")
                article.value.likeCount = article.value.likeCount + 1
            } else {
                message.warn("取消点赞")
                article.value.likeCount = article.value.likeCount - 1
            }
        })
    }
}

//评论点赞所需的参数
const commentsGiveALike = ref<CommentsGiveALike>({
    articleId: articleId,
    parentId: 0,
    userId: 0
})

//判断当前用户是否点赞
const userIsGiveALikeReply = () => {
    for (let i = 0; i < firstAndSecondList.value.length; i++) {
        for (let j = 0; j < userCommentsGiveALikeList.value.length; j++) {
            if (firstAndSecondList.value[i].id === userCommentsGiveALikeList.value[j].parentId) {
                firstAndSecondList.value[i].isLike = userCommentsGiveALikeList.value[j].isLike
                break;
            } else {
                firstAndSecondList.value[i].isLike = 0
            }
        }
    }
}

//当前用户的点赞列表
const userCommentsGiveALikeList = ref()

//根据文章id和用户id查询用户点赞信息
const getCommentsGiveALiveList = async () => {
    const res = await selectCommentsGiveALive(articleId, commentsGiveALike.value.userId)
    userCommentsGiveALikeList.value = res.data.data.list
    //判断当前用户是否点赞
    await userIsGiveALikeReply()
}

//评论点赞
const userGiveALikeToComments = lodash.throttle(async (parentId: number, index: number) => {
    commentsGiveALike.value.parentId = parentId
    if (!await checkUserLogin()) {
        message.warn('未登录，无法点赞')
    } else {
        giveALikeToComments(commentsGiveALike.value).then(() => {
            firstAndSecondList.value[index].isLike = firstAndSecondList.value[index].isLike === 1 ? 0 : 1;
            //如果点赞，则点赞人数+1
            if (firstAndSecondList.value[index].isLike === 1) {
                message.success("点赞成功")
                firstAndSecondList.value[index].likeCount = firstAndSecondList.value[index].likeCount + 1
            } else {
                message.error("取消点赞")
                firstAndSecondList.value[index].likeCount = firstAndSecondList.value[index].likeCount - 1
            }
        })
    }
}, 500)

//收藏所需的参数
const collect = ref<Collect>({
    articleId: articleId,
    userId: 0
})

//用户收藏
const handleUserCollect = async () => {
    if (!await checkUserLogin() || collect.value.userId === 0) {
        message.warn('未登录，无法收藏')
    } else {
        saveUserCollect(collect.value).then(() => {
            article.value.isCollect = article.value.isCollect === 1 ? 0 : 1
            //如果收藏，则收藏人数+1
            if (article.value.isCollect === 1) {
                message.success("收藏成功")
                article.value.collectCount = article.value.collectCount + 1
            } else {
                message.warn("取消收藏")
                article.value.collectCount = article.value.collectCount - 1
            }
        })
    }
}

//一级和二级评论列表
const firstAndSecondList = ref<Comments[]>([])

//根据文章id获取一级和二级评论
const handleFirstAndSecondComments = () => {
    getFirstAndSecondComments(articleId).then((res) => {
        firstAndSecondList.value = res.data.data.list
    })
}

//一级评论所需的参数
const comments = ref<CommentsVo>({
    articleId: articleId,
    content: '',
    userId: 0,
    nickname: '',
    avatar: ''
})

//用户发表评论
const handleFirstComment = () => {
    Publish.unsubscribe('sendContentToArticleComments')
    Publish.subscribe('sendContentToArticleComments', (a: string, b: string) => {
        console.log(a, b)
        comments.value.content = b
        //校验消息是否为空
        let checkContent = getText(comments.value.content)
        if (!checkUserLogin() || comments.value.userId === 0) {
            message.warn('未登录，无法评论')
        } else if (isNull(checkContent)) {
            message.warn('内容不能为空！')
        } else {
            publishComments(comments.value).then((res) => {
                message.success(res.data.message)
                //评论数+1
                article.value.commentCount = article.value.commentCount + 1
                //清除富文本编辑器内容
                Publish.publish('clearContentToArticleComments')
                comments.value.content = '<p></p>'
                handleFirstAndSecondComments()
            })
        }
    })
}

//接收子组件传过来的值
const receiveChildContent = (arr: string) => {
    secondCommentsParams.value.content = arr[0]
}

//二级评论对话框
const visibleSecondComments = ref<boolean>(false);
//多级评论对话框
const visibleMuchComments = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);

//二级评论需要的参数
const secondCommentsParams = ref<SecondCommentsParams>({
    articleId: articleId,
    firstId: 0,
    secondUserId: -1,
    secondOneNickname: '',
    secondOneAvatar: '',
    secondTwoUserId: 0,
    secondTwoNickname: '',
    secondTwoAvatar: '',
    content: ''
})

//是否显示对话框(二级评论)
const showModalSecondComments = (row: any) => {
    if (cookie.get("userinfo") == null) {
        message.warn('未登录，无法回复')
        return;
    } else {
        visibleSecondComments.value = true;
        secondCommentsParams.value.firstId = row.id
        secondCommentsParams.value.secondUserId = -1
        secondCommentsParams.value.secondOneNickname = row.nickname
        secondCommentsParams.value.secondOneAvatar = row.avatar
    }
};

//是否显示对话框(多级评论)
const showModalMuchComments = (row: any) => {
    if (cookie.get("userinfo") == null) {
        message.warn('未登录，无法回复')
        return;
    } else {
        visibleMuchComments.value = true;
        secondCommentsParams.value.firstId = row.firstId
        secondCommentsParams.value.secondUserId = row.secondTwoUserId
        secondCommentsParams.value.secondOneNickname = row.secondTwoNickname
        secondCommentsParams.value.secondOneAvatar = row.secondTwoAvatar
    }
};

//对话框点击确定回调(二级评论)
const handleOkSecondComments = () => {
    //校验消息是否为空
    let checkContent = getText(secondCommentsParams.value.content)
    if (isNull(checkContent)) {
        message.warn('内容不能为空！')
    } else if (secondCommentsParams.value.firstId === 0 || secondCommentsParams.value.secondTwoUserId === 0) {
        message.error('网络异常，请稍后重试！')
    } else {
        confirmLoading.value = true;
        setTimeout(() => {
            visibleSecondComments.value = false;
            confirmLoading.value = false;
            //清除富文本编辑器内容
            Publish.publish('clearContentToArticleComments')
            //保存用户回复的消息
            publishSecondComments(secondCommentsParams.value).then((res) => {
                message.success(res.data.message)
                secondCommentsParams.value.content = '<p></p>'
                handleFirstAndSecondComments()
            })
        }, 1000)
    }
}

//对话框点击确定回调(多级评论)
const handleOkMuchComments = () => {
    //校验消息是否为空
    let checkContent = getText(secondCommentsParams.value.content)
    if (isNull(checkContent)) {
        message.warn('内容不能为空！')
    } else if (secondCommentsParams.value.firstId === 0 || secondCommentsParams.value.secondTwoUserId === 0) {
        message.error('网络异常，请稍后重试！')
    } else {
        confirmLoading.value = true;
        setTimeout(() => {
            visibleMuchComments.value = false;
            confirmLoading.value = false;
            //清除富文本编辑器内容
            Publish.publish('clearContentToArticleComments')
            //保存用户回复的消息
            publishSecondComments(secondCommentsParams.value).then((res) => {
                message.success(res.data.message)
                secondCommentsParams.value.content = '<p></p>'
                handleFirstAndSecondComments()
            })
        }, 1000)
    }
}

//对话框点击遮罩层或右上角叉或取消按钮的回调(二级评论)
const handleCancelSecondComments = () => {
    //清除富文本编辑器内容
    Publish.publish('clearContentToArticleComments')
    secondCommentsParams.value.content = '<p></p>'
}

//对话框点击遮罩层或右上角叉或取消按钮的回调(多级评论)
const handleCancelMuchComments = () => {
    //清除富文本编辑器内容
    Publish.publish('clearContentToArticleComments')
    secondCommentsParams.value.content = '<p></p>'
}

//保存用户浏览文章记录需要的参数
const browse = ref<Browse>({
    articleId: articleId,
    userId: 0
})

//保存用户浏览文章记录
const handleUserBrowse = () => {
    if (browse.value.userId != 0) {
        saveUserBrowse(browse.value).then(() => {
        })
    } else {
        return
    }
}

//从cookie中获取用户id
const getUserId = () => {
    if (cookie.get('userinfo') != null) {
        userId.value = JSON.parse(cookie.get('userinfo')).id
        giveALike.value.userId = JSON.parse(cookie.get('userinfo')).id
        collect.value.userId = JSON.parse(cookie.get('userinfo')).id
        comments.value.userId = JSON.parse(cookie.get('userinfo')).id
        comments.value.nickname = JSON.parse(cookie.get('userinfo')).nickname
        comments.value.avatar = JSON.parse(cookie.get('userinfo')).avatar
        secondCommentsParams.value.secondTwoUserId = JSON.parse(cookie.get('userinfo')).id
        secondCommentsParams.value.secondTwoNickname = JSON.parse(cookie.get('userinfo')).nickname
        secondCommentsParams.value.secondTwoAvatar = JSON.parse(cookie.get('userinfo')).avatar
        commentsGiveALike.value.userId = JSON.parse(cookie.get('userinfo')).id
        browse.value.userId = JSON.parse(cookie.get('userinfo')).id
    } else {
        userId.value = 0
        giveALike.value.userId = 0
        collect.value.userId = 0
        comments.value.userId = 0
        commentsGiveALike.value.userId = 0
        browse.value.userId = 0
    }
}

getUserId()
handleArticleDetails()
handleFirstAndSecondComments()
handleArticleDetailsRecommend()
setTimeout(() => {
    getCommentsGiveALiveList()
}, 100)
onMounted(() => {
    handleFirstComment()
    handleUserBrowse()
})
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  width: 100%;

  .main_header {
    height: 70px;
    position: fixed;
    width: 100%;
    z-index: 99999;
  }

  .main_body {
    display: flex;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 15px;
    overflow: hidden;
    position: relative;

    .main_body_left {
      position: fixed;
      width: 300px;

      .main_body_left_user {
        margin-right: 10px;
        border: rgba(3, 102, 214, 0.3) solid 3px;
        background-color: #ffffff;
        padding: 3px;

        .main_body_left_one {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f0f0f0;

          .main_body_left_avatar {
            width: 70px;
            height: 70px;
            margin: 5px;
          }

          .main_body_left_nickname {
            font-weight: bold;
          }

          .main_body_left_one_right {
            display: flex;
            margin-top: 2px;

            .main_body_left_sex {
            }

            .main_body_left_time {
              margin-left: 10px;
            }
          }
        }

        .main_body_left_two {
          display: flex;
          justify-content: space-around;
          margin: 10px;

          .main_body_left_two_item {
            text-align: center;
            margin-bottom: 5px;
          }
        }
      }

      .main_body_left_recommend {
        margin-right: 10px;
        border: rgba(3, 102, 214, 0.3) solid 3px;
        background-color: #ffffff;
        margin-top: 10px;
      }
    }

    .main_body_right {
      margin-left: 300px;
      word-break: break-all;
      background-color: #ffffff;
      width: 100%;
      padding: 10px;

      .main_body_right_title {
        display: flex;
        word-break: break-all;

        .main_body_right_title_text {
          font-weight: bold;
          font-size: 30px;
          margin-bottom: 10px;
          margin-right: 10px;

          .main_body_right_title_img {
            width: 40px;
            height: 40px;
            //margin-left: 50px;
          }
        }

      }

      .main_body_right_introduce {
        background-color: rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
        padding: 10px;

        .main_body_right_introduce_1 {
          display: flex;
          margin-bottom: 5px;
          align-items: center;

          .main_body_right_introduce_gradeTranslation {
            color: red;
            font-weight: bold;
            font-size: 20px;
            font-style: oblique;
          }

          .main_body_right_introduce_nickname {
            margin-left: 10px;
          }

          .main_body_right_introduce_createTime_img {
            width: 25px;
            height: 25px;
            margin-left: 10px;
          }

          .main_body_right_introduce_createTime {
            margin-left: 2px;
          }

          .main_body_right_introduce_views_img {
            width: 25px;
            height: 25px;
            margin-left: 10px;
          }

          .main_body_right_introduce_views {
            margin-left: 2px;
          }

          .main_body_right_introduce_edit {
            background: linear-gradient(to right, red, blue);
            -webkit-background-clip: text;
            color: transparent;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .main_body_right_introduce_2 {
          display: flex;
          margin-left: 50px;

          .main_body_right_introduce_label {
            margin-left: 10px;
          }
        }
      }

      .main_body_right_content {
        padding-bottom: 40px;
        border-bottom: 1px solid #f0f0f0;
      }

      .main_body_right_correlation {
        font-size: 30px;
        font-weight: bold;
        padding: 10px;
        border-bottom: 1px solid #f0f0f0;
        color: #FF1CAE;
      }

      .main_body_right_for {
        margin-bottom: 60px;

        .main_body_right_for_item {
          .main_body_right_for_item_one {
            display: flex;
            padding: 5px;
            align-items: flex-end;

            .main_body_right_for_item_title {
              //padding: 5px;
              font-size: 18px;
              font-weight: 500;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 60%;
            }

            .main_body_right_for_item_nickname {
              margin-left: auto;
            }

            .main_body_right_for_item_views_img {
              width: 20px;
              height: 20px;
              margin-left: 20px;
            }

            .main_body_right_for_item_views {
              margin-left: 5px;
              margin-right: 10px;
            }
          }

          .main_body_right_for_item_content {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100vh;
            padding: 5px 0 5px 5px;
          }
        }
      }
    }

    .main_body_right_bottom {
      position: fixed;
      margin-left: 300px;
      word-break: break-all;
      background-color: #ffffff;
      width: 60%;
      padding: 10px;
      //margin-right: 10%;
      bottom: 0;
      display: flex;
      height: 60px;
      align-items: center;

      .main_body_right_bottom_1 {
        width: 25px;
        height: 25px;
        margin-left: auto;
        margin-right: 10px;
        cursor: pointer;
      }

      .main_body_right_bottom_1_count {
        margin-right: 30px;
      }

      .main_body_right_bottom_2 {
        width: 25px;
        height: 25px;
        margin-right: 10px;
        cursor: pointer;
      }

      .main_body_right_bottom_2_count {
        margin-right: 30px;
      }

      .main_body_right_bottom_3 {
        width: 25px;
        height: 25px;
        margin-right: 10px;
        cursor: pointer;
      }

      .main_body_right_bottom_3_count {
        margin-right: 10px;
      }
    }
  }
}

.custom-class {
  .drawer_body {
    margin-top: 10px;

    .drawer_body_for:nth-child(1) {
      .drawer_body_item {
        .drawer_body_item_nickname:after {
          content: "热评";
          color: red;
          margin-left: 10px;
          font-style: italic;
        }
      }
    }

    .drawer_body_item {
      display: flex;

      .drawer_body_item_img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 5px;
        margin-top: 5px;
      }

      .drawer_body_item_nickname {
        display: flex;
        margin-top: 10px;
        font-weight: bold;
      }

      .drawer_body_item_content {
        margin-top: 5px;
      }

      .drawer_body_item_bottom {
        display: flex;

        .drawer_body_item_createTime {
          margin-right: 10px;
        }

        .drawer_body_item_like {
          width: 20px;
          height: 20px;
          margin-right: 2px;
          cursor: pointer;
        }

        .drawer_body_item_button {
          margin-left: 10px;
          background-color: #90F9C4;
          border-radius: 50px;
        }
      }

      .drawer_body_item2 {
        display: flex;

        .drawer_body_item2_avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-right: 5px;
          margin-top: 5px;
        }

        .drawer_body_item2_nickname {
          margin-top: 10px;
          font-weight: bold;
        }

        .drawer_body_item2_top {
          display: flex;

          .drawer_body_item2_nickname {
            margin-top: 10px;
            font-weight: bold;
            word-wrap: break-word;
          }

          .drawer_body_item2_reply {
            margin: 10px 10px 0;
            white-space: nowrap;
          }
        }

        .drawer_body_item2_content {
          margin-top: 5px;
        }

        .drawer_body_item2_bottom {
          display: flex;

          .drawer_body_item2_createTime {
            margin-right: 10px;
          }

          .drawer_body_item2_button {
            margin-left: 10px;
            background-color: #90F9C4;
            border-radius: 50px;
          }
        }
      }
    }
  }
}

</style>